Este Dashboard demo se inspira en el esquema cyber/neón, usando Chakra UI como base de diseño en Vision UI Dashboard. El objetivo de este análisis es mostrar cómo combinar datos, visualizaciones y el “look & feel” moderno, en Markdown lineal, útil para informes, presentaciones o auditorías UX.
set.seed(1)
demo_data <- tibble(
Categoria = rep(c("Web","Mobile"), each = 5),
Métrica = c(
"Usuarios", "Sesiones", "Conversiones", "Retención (%)", "Bounce Rate",
"Usuarios", "Sesiones", "Conversiones", "Retención (%)", "Bounce Rate"
),
Valor = round(runif(10, 33, 98), 2)
)
datatable(demo_data, caption="Tabla 1: Métricas demo dashboard Vision UI", options = list(pageLength = 10, dom = 'tip'))demo_data %>%
ggplot(aes(x=Métrica, y=Valor, fill=Categoria)) +
geom_col(width=0.7) +
scale_fill_manual(values = cyber_palette[c("blue","gold")]) +
labs(title = "Dashboard Demo: Métricas por Categoría", x=NULL, y=NULL) +
theme_minimal(base_size = 12) +
theme(
plot.background = element_rect(fill = "#0b1437", color = NA),
panel.background = element_rect(fill = "#171f3b", color = NA),
text = element_text(color = "#e0e6ed"),
axis.text = element_text(color = "#8b92a0"),
axis.title = element_text(color = "#e0e6ed"),
plot.title = element_text(color = "#3c5cfe", size=16, face="bold")
)## Warning: No shared levels found between `names(values)` of the manual scale and the
## data's fill values.
## No shared levels found between `names(values)` of the manual scale and the
## data's fill values.
plot_ly(demo_data, x=~Métrica, y=~Valor, color=~Categoria,
colors = cyber_palette[c("blue","gold")],
type="bar", text = ~paste("Valor:", Valor), hoverinfo="text") %>%
layout(
title = list(text="Métricas interactivo • Visual style VisionUI", font=list(color="#3c5cfe")),
plot_bgcolor = "#0b1437",
paper_bgcolor = "#171f3b",
font = list(color="#e0e6ed")
)## Warning: Some values were outside the color scale and will be treated as NA
## Some values were outside the color scale and will be treated as NA
## Some values were outside the color scale and will be treated as NA
## Some values were outside the color scale and will be treated as NA
demo_data %>%
gt() %>%
tab_header(title="Tabla 2: Métricas Vision UI Cyber") %>%
tab_style(style = cell_fill(color = "#1c2746"), locations = cells_body()) %>%
tab_style(style = cell_text(color="#00eaff", weight="bold"), locations = cells_body(columns = Métrica)) %>%
tab_style(style = cell_text(color="#ffd700", weight="bold"), locations = cells_column_labels())| Tabla 2: Métricas Vision UI Cyber | ||
| Categoria | Métrica | Valor |
|---|---|---|
| Web | Usuarios | 50.26 |
| Web | Sesiones | 57.19 |
| Web | Conversiones | 70.24 |
| Web | Retención (%) | 92.03 |
| Web | Bounce Rate | 46.11 |
| Mobile | Usuarios | 91.40 |
| Mobile | Sesiones | 94.40 |
| Mobile | Conversiones | 75.95 |
| Mobile | Retención (%) | 73.89 |
| Mobile | Bounce Rate | 37.02 |
La paleta Vision UI (azul eléctrico, púrpura, cian) refuerza el foco de usuario y la sensación de modernidad, ayudando a resaltar métricas clave. Un dashboard eficaz combina estética avanzada y accesibilidad: contrastes altos, tablas claras y visualizaciones interactivas facilitan las decisiones en contextos de datos complejos.
Markdown lineal y cyber para análisis dashboard: - Ventajas: lectura clara, visuales vibrantes, código directo. - Facilidad: puedes integrar chunks R y estilos neón desde el propio repo Vision UI Chakra. - Siguiente paso: conecta datos reales, métricas y visualizaciones R al flujo de trabajo de tu dashboard en React/Chakra o Python.
Dashboard Cyber • VisionUI • Universidad del Valle
v